<template>
  <div>
    <a-drawer
      :title="title"
      :maskClosable="true"
      :width="drawerWidth"
      placement="right"
      :closable="true"
      @close="handleCancel"
      :visible="visible"
      style="height: 100%;">

      <a-row :gutter="24">
        <a-col :span="12">
          <a-select placeholder="跟进类型" v-model="queryParam.followType" style="width: 100%" allowClear @change="getCustomerFollowInfo()">
            <a-select-option value="1">系统操作</a-select-option>
            <a-select-option value="2">微信跟进</a-select-option>
            <a-select-option value="3">电话跟进</a-select-option>
            <a-select-option value="4">面谈跟进</a-select-option>
            <!--<a-select-option value="5">客户跟进</a-select-option>-->
          </a-select>
        </a-col>
        <a-col :span="12">
          <a-select
            show-search
            :allowClear="true"
            placeholder="用户"
            v-model="queryParam.followCreateId"
            style="width: 100%;"
            :filter-option="filterOptionCreateBy"
            @change="getCustomerFollowInfo()">
            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.title }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="24">
          <a-button type="primary" v-if="currentHighSeasCustomer.highSeasDepot == 4" @click="addHighSeasFollowLog()" style="width: 100%;margin-right: 10px;margin-top: 10px">添加跟进记录</a-button>
          <!--<a-checkbox @change="onChange" >只显示跟进</a-checkbox>-->
        </a-col>
      </a-row>

      <div>
        <a-skeleton :loading="timelineLoading" active>
          <a-timeline v-if="followInfoList.length !== 0" style="margin-top: 10px;">
            <a-card :loading="timelineLoading" :bordered="true">
              <div class="list">
                <van-list
                  offset="100"
                  finished-text="没有更多了"
                  :immediate-check="false"
                >
                  <div
                    class="customer-list"
                    v-for="(item,i) in followInfoList"
                    :key="i"
                  >
                    <div>
                      <div class="name">创建人：{{ item.createBy || '无' }}</div>
                      <div class="contact">
                        <span>跟进类型：{{ getTypeName(item.type) }}</span>
                      </div>
                      <div class="contact">
                        <span>跟进时间：{{ item.followTime }}</span>
                      </div>
                      <div class="contact">
                        <span>跟进内容：{{ item.contentList[0] || '无' }}</span>
                      </div>
                      <div style="margin-bottom: 5px">
                        <img :src="imgUrl" @click="handlePreview(imgUrl,item.imgList)" style="width: 100px;height: 100px;margin-right: 10px"
                             v-for="(imgUrl,imgIndex) in item.imgList" :key="imgIndex">
                      </div>
                    </div>
                  </div>
                </van-list>
              </div>
              <!--<a-timeline-item v-for="(item,index) in followInfoList" :key="index">
                <a-card :title="'跟进时间：' + item.followTime" style="width: 100%;">
                  <a-row>
                    <a-col :span="1" style="margin-right: 10px;">
                      &lt;!&ndash;                      <img :src="item.avatar" style="height: 40px;width: 40px;border-radius: 50%"/>&ndash;&gt;
                      <a-avatar :src="item.avatar" v-if="item.avatar" style="padding: 0px"></a-avatar>
                      <a-avatar style="padding: 0px;color: #f56a00; backgroundColor: #fde3cf" v-else>{{ item.createBy.substring(0, 1) }}</a-avatar>
                    </a-col>
                    <a-col :span="17" style="margin-left: 10px">
                      <div style="margin-bottom: 5px;">
                        <span style="color: black">创建人:<span style="color: darkgray">{{item.createBy}}</span></span><br>
                      </div>
                      <div style="margin-bottom: 5px">
                        <span style="color: black">跟进类型:<span style="color: darkgray">{{getTypeName(item.type)}}</span></span><br>
                      </div>
                      <div style="margin-bottom: 5px">
                        <span style="color: black">跟进内容:<span style="color: darkgray">{{item.contentList[0]}}</span></span><br>
                        <div v-if="index != 0" v-for="(content,index) in item.contentList" :key="index" style="padding-left: 10px;color: darkgray">
                          {{content}}
                        </div>
                      </div>
                      <div style="margin-bottom: 5px" v-if="item.carbonBy != null && item.carbonBy != ''">
                        <span style="color: black">抄送人：<span style="color: darkgray;padding: 0 5px 0 5px" v-for="(ccName,index) in item.ccList">{{ccName}}</span></span><br>
                      </div>
                      <div style="margin-bottom: 5px" v-if="item.nextFollowTime != null">
                        <span style="color: black">下次跟进时间:<span style="color: darkgray">{{item.nextFollowTime}}</span></span><br>
                      </div>
                      <div style="margin-bottom: 5px">
                        <img :src="imgUrl" @click="handlePreview(imgUrl,item.imgList)" style="width: 100px;height: 100px;margin-right: 10px"
                             v-for="(imgUrl,imgIndex) in item.imgList" :key="imgIndex">
                      </div>
                    </a-col>
                  </a-row>
                </a-card>
              </a-timeline-item>-->
            </a-card>
          </a-timeline>
          <a-empty v-else style="margin-top: 40px;" />
        </a-skeleton>

        <a-modal :visible="previewVisible" :footer="null" centered width="auto" @cancel="handleClose">
          <JReview :path="previewImage" :pathList="imgList"></JReview>
        </a-modal>
      </div>
      <add-high-seas-follow-log ref="AddHighSeasFollowLog" @addOk="addOk"></add-high-seas-follow-log>
    </a-drawer>
  </div>
</template>

<script>

  import {getAction} from "@api/manage";
  import AddHighSeasFollowLog from './addHighSeasFollowLog'

  export default {
    name: 'customerFollowRecordModal',
    components: { AddHighSeasFollowLog },
    data() {
      return {
        modalWidth: '30%',
        drawerWidth: '100%',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        modaltoggleFlag: true,
        confirmDirty: false,
        disableSubmit: false,
        departIdShow: false,
        title: '操作',
        visible: false,
        uploadLoading: false,
        confirmLoading: false,
        model: {},
        timelineLoading: false,
        followInfoList: [],
        commentListData: [],
        userList: [],
        currentFollowId: 0,
        showCommentFlag: false,
        imgList:[],
        previewImage: '',
        previewVisible: false,
        isShowFollowFlag: false,
        queryParam:{},
        followType: '',
        currentCustomerId: 0,
        currentHighSeasCustomer: {},
        pageIntoType: 0,  //进入页面的类型
        url:{
          getCustomerFollowInfo: "/ghFollowRecord/getCustomerFollowRecordInfo",
          queryAllUserBackCombo: "/sys/api/queryAllUserBackCombo",
        }
      }
    },
    created() {
      this.getUserList();
    },
    methods: {
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modaltoggleFlag = !this.modaltoggleFlag
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleCancel() {
        this.close()
      },
      async handlePreview(url,imgList) {
        this.previewImage = url;
        this.imgList = imgList;
        this.previewVisible = true;
      },
      //获取跟进记录
      getCustomerFollowInfo(customerId) {
        if (this.currentCustomerId == null || this.currentCustomerId == 0){
          this.currentCustomerId = customerId
        }
        this.timelineLoading = true;
        getAction(this.url.getCustomerFollowInfo, {
          customerId: this.currentCustomerId,
          type: this.queryParam.followType,
          createId: this.queryParam.followCreateId,
          isShowFollowFlag: this.isShowFollowFlag,
        }).then((res) => {
          if (res.success) {
            this.timelineLoading = false;
            this.followInfoList = res.result;
          }
        })
      },
      getUserList() {
        getAction(this.url.queryAllUserBackCombo, {})
          .then((res) => {
            this.userList = res;
          })
      },
      getTypeName(type) {
        if (type === 1) {
          return "系统操作";
        } else if (type === 2) {
          return "微信跟进";
        } else if (type === 3) {
          return "电话跟进";
        } else if (type === 4) {
          return "面谈跟进";
        } else if (type === 5) {
          return "客户跟进";
        }
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      onChange(e){
        this.isShowFollowFlag = e.target.checked;
        this.getCustomerFollowInfo();
      },
      //添加跟进记录
      addHighSeasFollowLog(){
        this.$refs.AddHighSeasFollowLog.title = "添加跟进记录";
        this.$refs.AddHighSeasFollowLog.add(this.currentHighSeasCustomer);
      },
      addOk(customerId){
        this.getCustomerFollowInfo(customerId);
        this.$emit('addOk');
      },
      filterOptionCreateBy(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
    }
  }
</script>

<style scoped>

  .list{
    overflow-y: scroll;
    /*height:100vh;*/
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>